<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  import Loading from './components/Loading'
  export default {
    name: 'app',
    computed: {
      getShowLoading() {
        return this.$store.getters.showLoading
      },
      getLoginState() {
        return this.$store.getters.getLoginState
      }
    },
    watch: {
      getShowLoading: function(val) {
        if (val) {
          this.handleSpinCustom()
        } else {
          this.handleSpinHide()
        }
      },
      getLoginState: function(val) {
        if (!val) {
          this.$router.push({ path: '/faceLogin', query: { toPath: this.$route.fullPath } })
        }
      }
    },
    methods: {
      handleSpinCustom() {
        this.$Spin.show({
          render: (h) => h(Loading)
        })
      },
      handleSpinHide() {
        this.$Spin.hide()
      }
    },
    mounted() {
      this.$Message.config({ top: 24, duration: 5 })
    }
  }

</script>

<style lang="scss">
  body {
    font-size: 0.4rem;
    color: #333;
    #app {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
  .demo-spin-icon-load{
    -webkit-animation:ani-demo-spin 1s linear infinite;
    animation:ani-demo-spin 1s linear infinite;
  }
</style>
